<template>
  <div class="box">
    <div class="title">
      年度游客总量对比
      <div class="title-bg"></div>
    </div>
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts" name="year">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const chartRef = ref()
onMounted(() => {
  initChart()
})

const initChart = () => {
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    title: {
      text: '年度游客总量对比',
      textStyle: {
        color: 'white',
      },
      left: '50%',
      top: 10,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: 'white',
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'white',
      },
      show: false,
    },
    series: {
      type: 'scatter',
      data: [12, 33, 44, 55, 122, 235, 212, 12, 33, 44, 15],

      itemStyle: {
        color: 'rgb(36,207,45)',
      },
      symbol: 'arrow',
      label: {
        show: true,
        color: 'white',
        position: 'top',
      },
    },
  })
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  background: url('../../images/dataScreen-main-lb.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  .title {
    color: white;
    font-size: 20px;
  }
  .title-bg {
    margin-top: 7px;
    display: block;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    width: 68px;
    height: 7px;
  }
  .chart {
    height: 100%;
    width: 100%;
  }
}
</style>
